<template>
    <div>
        <el-form-item
            label="量级设置"
        >
            <el-input-number v-model="activeData.table.level" :min="1" :max="100" label="描述文字" />
        </el-form-item>
        <el-form-item
            v-if="activeData.table.copyWriting"
            label="最低分文案"
        >
            <el-input v-model="activeData.table.copyWriting.min" placeholder="请输入最低分文案" />
        </el-form-item>
        <el-form-item
            v-if="activeData.table.copyWriting"
            label="最高分文案"
        >
            <el-input v-model="activeData.table.copyWriting.max" placeholder="请输入最高分文案" />
        </el-form-item>
        <el-form-item
            label="图标"
        >
            <span v-for="icon in iconList" :key="icon" :class="[icon,icon===activeData.icon?'selected':'']"
                  @click="handleSelectIcon(icon)"
            />
        </el-form-item>
        <matrix-option :active-data="activeData" />
    </div>
</template>
<script>
import MatrixOption from './matrix'

import draggable from 'vuedraggable'

export default {
    name: 'ConfigItemMatrixScale',
    components: {
        MatrixOption,
        draggable
    },
    props: ['activeData'],
    data() {
        return {
            iconList: ['tduck-taiyang', 'tduck-biaoqing-weixiao', 'tduck-dianzan', 'tduck-aixin', 'tduck-star', 'tduck-moonyueliang']
        }
    },
    methods: {
        handleSelectIcon(icon) {
            this.$set(this.activeData, 'icon', icon)
        }
    }
}
</script>

<style lang="scss" scoped>
[class^="tduck-"], [class*=" tduck-"] {
  margin: 5px;

  &:hover {
    color: rgb(247, 186, 42);
  }
}

.selected {
  color: rgb(247, 186, 42);
}

</style>
